<template>
    <div>
        <div v-for="item in menu" :key="item.id">
            <el-menu-item v-if="!item.children" :index="item.path">
                <i v-show="item.icon" :class="item.icon"></i>
                <span>{{item.title}}</span>
            </el-menu-item>
            <!-- 子路由 -->
            <el-sub-menu v-if="item.children" :index="item.path">
                <template #title>
                    <i v-show="item.icon" :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <sub-menu v-if="item.children" :data="item.children"></sub-menu>
            </el-sub-menu>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    setup(props, { emit }) {
        let menu = props.data;
        return {
            menu,
        };
    },
    name: "SubMenu",
    props: {
        data: {
            type: Array,
        },
    },
    methods: {
        openRouter(i: string) {
            this.$router.push(i);
        },
    },
});
</script>
